<template>
	<public-view navType="other" navTitle="提现明细">
		<view class="content-log">
			<view class="lv-tab-box flex a-i-c j-c-b">
				<block v-for="(item, index) in lv_tabs" :key="item.id">
					<view class="tab-item flex f-d-c a-i-c" :class="lv_tabs_id === item.id?'active':'unactive'" @click="changeTab(item)">
						{{item.title}}
						<view class="line" :class="lv_tabs_id === item.id?'active-line':''">
							
						</view>
					</view>
				</block>
			</view>
			<view class="log-item-box flex a-i-c j-c-b" v-for="(item,index) in withdraw_log" :key="index">
				<view class="flex f-d-c">
					<view class="titile-box flex a-i-c">
						<view class="text f-s--28 l-h-38">
							提现记录
						</view>
						<view class="status-tip f-s-20 all-center ready" v-if="item.status == 0">
							待审核
						</view>
						<view class="status-tip f-s-20 all-center ready1" v-else-if="item.status == 1">
							待打款
						</view>
						<view class="status-tip f-s-20 all-center end" v-else-if="item.status == 2">
							已打款
						</view>
						<view class="status-tip f-s-20 all-center is-null" v-else>
							无效
						</view>
					</view>
					<view class="bank-info flex a-i-c f-s-24 color-878787">
						<text style="margin-right: 16rpx;">提现账户：{{ item?.target_data?.bank || '' }}</text>
						<block v-for="(item, index) in 4" :key="'a'+index">
							<view class="dian"></view>
						</block>
						<block v-for="(item, index) in 4" :key="'b'+index">
							<view class="dian"></view>
						</block>
						<block v-for="(item, index) in 4" :key="'c'+index">
							<view class="dian"></view>
						</block>
						<text>0204</text>
					</view>
					<view class="f-s-24 color-878787" style="margin-top: 20rpx;" v-if="item.status == 2">
						到账时间：{{ item.updatetime || '' }}
					</view>
					<view class="f-s-24 color-878787" style="margin-top: 20rpx;" v-else>
						申请时间：{{ item.createtime || '' }}
					</view>
				</view>
				<view class="flex f-d-c f-s-48" style="color: #FF4545;justify-content: flex-end;height: 100%;">
					<view class="" style="line-height: 66rpx;margin-bottom: 12rpx;">
						+ {{ item.amount || '0.00' }}
					</view>
					<view class="f-s-24 color-87878">
						手续费{{ item.commission || '0.00'}}元
					</view>
				</view>
			</view>
		</view>
	</public-view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				lv_tabs_id:-1,
				lv_tabs:[
					{
						id:-1,
						title:"全部",
					},
					{
						id:0,
						title:"待审核",
					},
					{
						id:1,
						title:"待打款",
					},
					{
						id:2,
						title:"已打款",
					},
					{
						id:3,
						title:"无效",
					}
				],
				withdraw_log:[]
			};
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		onLoad() {
			this.page = 1

		},
		onShow() {
			let t = setTimeout(() => {
				this.getWithdrawLog()
			},100)
		},
		methods:{
			changeTab(item){
				this.lv_tabs_id = item.id
				this.page = 1
				this.getWithdrawLog()
			},
			onReachBottom() {
				this.page++
				this.getWithdrawLog()
			},
			getWithdrawLog(){
				let that = this
				that.util.postRequest({
					url:"v1/public_/withdraw_log",
					data: {
						source_id: that.userInfo.id,
						source_type:'distributor',
						status:that.lv_tabs_id,
						rows:10,
						page:that.page
					}
				}).then(res => {
					if(that.page === 1){
						that.withdraw_log = res.data.data
					}else{
						if(res.data.data.length>0){
							that.withdraw_log = that.withdraw_log.concat(res.data.data)
						}else{
							// that.page--
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.log-item-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16upx;
		margin-bottom: 20upx;
		height: 234upx;
		padding: 36upx 20upx 60upx 40upx;
		.bank-info{
			.dian{
				width: 8upx;
				height: 8upx;
				border-radius: 50%;
				background: #878787;
				margin-right: 8upx;
			}
		}
		.titile-box{
			margin-bottom: 30upx;
			.status-tip{
				width: 88upx;
				height: 32upx;
				border-radius: 66upx;
			}
			.ready{
				color: #FF6A6C;
				border: 2upx solid #FF6A6C;
			}
			.ready1{
				color: #FFA96A;
				border: 2upx solid #FFA96A;
			}
			.end{
				color: #2567F3;
				border: 2upx solid #2567F3;
			}
			.is-null{
				color: #B9B9B9;
				border: 2upx solid #B9B9B9;
			}
			.text{
				margin-right: 18upx;
			}
		}
	}
	.lv-tab-box{
		width: 100%;
		padding: 0 26upx;
		margin-bottom: 32upx;
		.tab-item{
			position: relative;
		}
		.active{
			color: #333333;
		}
		.unactive{
			color: rgba(51, 51, 51, 0.4);
		}
		.line{
			position: absolute;
			bottom: -10upx;
			width: 40upx;
			height: 4upx;
			background: #2567F3;
			border-radius: 4upx;
			transform: scale(0);
			transition: all .1s linear;
		}
		.active-line{
			transform: scale(1);
		}
	}
	.content-log{
		width: 100%;
		padding: 24upx;
	}
</style>
